<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">

</head>
<body>
<h1> 订单管理界面 </h1>
<table class="layui-hide" id="checktable" lay-filter="checktable"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">

        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">增加一个订单</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<form class="layui-form" lay-filter = "showform" id = "window">
    <div class="layui-form-item">
        <label class="layui-form-label">审核编号</label>
        <div class="layui-input-inline">
            <input id="checkid" type="text" name="checkid" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">教材名</label>
        <div class="layui-input-inline">
            <select id = "bookname" name="bookname" lay-filter="bookname">
                <option value="">请选择一个教材</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-disabled">教材价格</label>
        <div class="layui-input-inline layui-disabled" >
            <input placeholder="通过选择教材以确定教材价格"  id="price" readonly type="text" name="price" autocomplete="off" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-disabled">教材编号</label>
        <div class="layui-input-inline layui-disabled" >
            <input placeholder="通过选择教材以确定教材号"  id="bookid" readonly type="text" name="bookid" autocomplete="off" class="layui-input layui-disabled">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">课程名</label>
        <div class="layui-input-inline">
            <select id = "coursename" name="coursename" lay-filter="coursename">
                <option value="">请选择一个课程</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label layui-disabled">课程号</label>
        <div class="layui-input-inline layui-disabled" >
            <input placeholder="通过选择课程以确定课程号"  id="cid" readonly type="text" name="cid" autocomplete="off" class="layui-input layui-disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">阶段</label>
        <div class="layui-input-inline">
            <select id = "stage" name="stage" lay-filter="stage">
                <option value="0">未上传或已被删除</option>
            </select>
        </div>
    </div>

    <button layui-btn lay-submit lay-filter="test">提交</button>
</form>



<script src="../../layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>

    layui.use(['table', 'form', 'laydate'], function(){

        var table = layui.table,
            form = layui.form,
            $ = layui.jquery
        laydate = layui.laydate;

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/courseFind",
            success: function (rs) {
                console.log("找到所有course", rs)
                $.each(rs.data, function (index, item) {
                    // 追加option节点
                    //item.name是option里的文本值
                    //item.id是option的value值
                    $("#coursename").append(new Option(item.name, item.cid));
                });
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/textbookFind",
                    success: function (rs) {
                        console.log("找到所有book", rs)
                        $.each(rs.data, function (index, item) {
                            // 追加option节点
                            //item.name是option里的文本值
                            //item.id是option的value值
                            $("#bookname").append(new Option(item.name, item.bookid));
                        });
                        //重新渲染下拉框
                        form.render('select');
                    },
                    error: function (res){
                        console.log(res);
                    }
                });
            },
            error: function (res){
                console.log(res);
            }
        });


        //下拉选择框监听事件
        form.on('select(coursename)', function(data){
            $('#cid').val(data.value);
        });

        form.on('select(bookname)', function(data){
            console.log("book监听", data.value)

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/textbookFindByBookId",
                data: {"bookid":data.value},
                success: function (res) {
                    console.log(res);
                    $('#bookid').val(data.value);
                    $('#price').val(res.data.price);
                    console.log("书本价格", res.data.price)
                },
                error: function (res){
                    console.log(res);
                }
            });
        });


        $('#checkid').val("");
        $('#bookname').val("");
        $('#bookid').val("");
        $('#price').val("");
        $('#coursename').val("");
        $('#cid').val("");
        $('#stage').val("");

        form.on('submit(test)', function(data){
            let formdata = form.val("showform");
            console.log("表单数据", formdata)
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/TeacherCheckAdd",
                data: formdata,
                success: function (res) {
                    console.log(res);
                },
                error: function (res){
                    console.log(res);
                }
            });
        });

    });
</script>



</body>

</html>

